<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="css/content.css" />
        <script src="js/jquery-3.3.1.min.js"></script>
        <script type="text/javascript" src="js/template.js"></script>
         <script src="js/config.js"></script>



	
		
	</head>

	<body>
		
		
		
		<div class="container">
			<header class="mui-bar mui-bar-nav">
				<a class="back mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			    <h1 class="mui-title">注册详情</h1>
			</header>
			
			
			<!--弹出层-->
			
			<div class="tan">
				
				<div class="mengban">
					<div class="dContent">
						<div class="tan-top">
							<div class="dTitle">
							<span>是否放弃任务</span>
							</div>
							
							<div class="line"></div>
						</div>
						
						
						<div class="tan-down">
							
							<div class="dLi">
								<span>返回列表</span>
							</div>
							<div class="dLi2">
								<span>放弃任务</span>
							</div>
							
							<div class="dclose">
								<span>取消</span>
							</div>
							
							
						</div>
						
					
					</div>
					
					
					
					
					
					
				</div>
				
				
			</div>
			
			
			
			 <!--内容区-->
			<div class="head">
				<div class="money">
					<span>+</span>
					<span class="qian">25</span>
					<span>元</span>
				</div>
				<div class="time">
					<span class="span">
						<span>剩余时间:</span>
						<span class="stime">59:59</span>
					</span>
				</div>
				
				<div class="img">
					<img class="img1" src="" alt="" />
					<p class="text">设么授权</p>
				</div>
				
			</div>
			
			
			<div class="content">
				<div class="xuzhi">
					
					<div class="xuzhi_text">
						<span class="xuzhi-left">须知</span>
						<span class="xuzhi-right red">仅限【<span class="task">360借条</span>】新用户</span>
					</div>
					
					<div class="xuzhi_text">
						<span class="xuzhi-left">须知</span>
						<span class="xuzhi-right">仅限360借条新用户，领取免息券可往下做</span>
					</div>
					<div class="xuzhi_text">
						<span class="xuzhi-left">须知</span>
						<span class="xuzhi-right">仅限360借条新用户，领取免息券可往下做</span>
					</div>
					<div class="xuzhi_text">
						<span class="xuzhi-left">须知</span>
						<span class="xuzhi-right">仅限360借条新用户，领取免息券可往下做</span>
					</div>
					<div class="xuzhi_text">
						<span class="xuzhi-left">须知</span>
						<span class="xuzhi-right">仅限360借条新用户，领取免息券可往下做</span>
					</div>
					<div class="xuzhi_text">
						<span class="xuzhi-left">须知</span>
						<span class="xuzhi-right">仅限360借条新用户，领取免息券可往下做</span>
					</div>
				</div>
				
				
				
				
				<div class="jiaocheng"></div>
				
				
					
					   <script type="text/html" id="hidden">
					   <div class="mui-slider">
					  <div class="mui-slider-group">
					    <!--第一个内容区容器-->
					    <div class="mui-slider-item">
					      <!-- 具体内容 -->
					      <div class="pto txt">
							
							<h4>详细教程</h4>
							<span>共<%=imgShili.length%>步</span>
						</div>
					    </div>
					    <!--第二个内容区-->
					    
					    
					   
					    
					    <%for (var i=0;i<imgShili.length;i++) {%>
								
                		<div class="mui-slider-item">
					      <!-- 具体内容 -->
						      <div class="pto meng">
						      	<img class="img min" src="<%=imgShili[i]%>" alt="" data-preview-src="" data-preview-group="1" />
								<i class="inum"><%=i%></i>
							 </div>
						</div>
           				 <%}%>

					    
					   
					    
					    
					     <!--第二个内容区-->
					    <!--<div class="mui-slider-item">
					     
						      <div class="pto meng">
						      	<img src="./images/2.jpg" alt="" data-preview-src="" data-preview-group="1"/>
								<i class="inum">2</i>
							 </div>
							
						
					    </div>-->
					    
					     <!--第三个内容区-->
					    <!--<div class="mui-slider-item">
					    
						      <div class="pto meng">
						      	<img src="./images/2.jpg" alt="" data-preview-src="" data-preview-group="1"/>
								<i class="inum">3</i>
							 </div>
						
					    </div>-->
					    
					    
					     <!--第四个内容区-->
					    <!--<div class="mui-slider-item">
					      
						      <div class="pto meng">
						      	<img src="./images/2.jpg" alt="" data-preview-src="" data-preview-group="1"/>
								<i class="inum">4</i>
							 </div>
						
					    </div>-->
					    
					    
					     <!--第五个内容区-->
					    <!--<div class="mui-slider-item">
					     
						      <div class="pto meng">
						      	<img src="./images/2.jpg" alt="" data-preview-src="" data-preview-group="1"/>
								<i class="inum">5</i>
							 </div>
						
					    </div>-->
					    
					     <!--第六个内容区-->
					    <!--<div class="mui-slider-item">
					    
						      <div class="pto meng">
						      	<img src="./images/2.jpg" alt="" data-preview-src="" data-preview-group="1"/>
								<i class="inum">6</i>
							 </div>
						
					    </div>
					    -->
					     <!--第七个内容区-->
					    <!--<div class="mui-slider-item">
					    
						      <div class="pto meng">
						      	<img src="./images/2.jpg" alt="" data-preview-src="" data-preview-group="1"/>
								<i class="inum">7</i>
							 </div>
						
					    </div>-->
					 
					</div>
					
					</script>	

			
				
				
				<div class="begin">
					
					<a class="btn-begin">开始任务</a>
					
				</div>
				
			</div>
			
			
			
			
			<div class="message">
				<div class="m_tet">
					<form class="mui-input-group" action="#" method="post">
					    <div class="mui-input-row">
					        <label>姓名</label>
					        <input type="text" class=" shu1 mui-input-clear" placeholder="注册所用姓名">
					    </div>
					    
					    <div class="mui-input-row">
					        <label>手机号</label>
					        <input type="number" class=" shu2 mui-input-clear" placeholder="注册所用手机号">
					        
					    </div>
					    
					    

					</form>
				
				
				
				</div>
				
				
				<div class="jietu">
					
						
					
					<h2>上传截图</h2>
					
					<div class="feedback">
			
							<div class="dynamic_images">
								<ul>
									<li id="tuList">
										
									<lable  for="file"><input class="none" id="file" type="file" name="pictureA_file" accept="image/*;"/></lable>
									
									</li>
					
								</ul>
							</div>
						</div>
					

				</div>
				
				
				<div class="tijiao">
					
					
					<a class="btn1">提交任务</a>
				</div>
				
				<div class="tip">任务提交后到账需要1-3个工作日</div>
			</div>
			
			
			
		</div>
		
		
		
		<script>
			
			
			
				var oList = [];
				var data = localStorage.getItem("data");
//				console.log("storage"+data)
				var loc=location.href;
				var n1=loc.length;//地址的总长度
				var n2=loc.indexOf("=");//取得=号的位置
				var id=decodeURI(loc.substr(n2+1, n1-n2));//从=号后面的内容
				console.log("第几个li"+id);
				var taskId="";
				
					
//			var data = (localStorage.getItem("sou"));
					
				$.ajax({
					url:host+"/buss/task/getOne?id="+id,
					type:"get",
					success:function(res){
						
						console.log("试试"+JSON.stringify(res));
							var name = res.data;
						   var url = name.skipHerf;
						    var money = name.userPrice;
						    var nextime = name.sout;
						    var text = name.name;
						    var remarks = name.remarks
						    var imgUrl = name.imgIcon;
						    var imgShili = name.imgShili.split(",");
						     taskId =name.id;
						    console.log("bbbbbbbbbb"+imgShili)
						    console.log(url +"ni"+money)
						    
						    
				    document.getElementsByClassName("img1")[0].setAttribute("src",imgUrl);
				    document.getElementsByClassName("qian")[0].innerText= money;
				    document.getElementsByClassName("xuzhi")[0].innerHTML= remarks;
				    document.getElementsByClassName("text")[0].innerText= text;
			    
//					if(remarks.length>0){
//						document.getElementsByClassName("task")[0].innerText= text;
//					}
				    
				    var html = template(document.getElementById('hidden').innerHTML, name);


						document.getElementsByClassName("jiaocheng")[0].innerHTML = html;
				    
					//倒计时    
				
			    function strTime() {
			         
			            var minute = 0,
			                second = 0;
			
			            --nextime;
			            //时间默认值
			
			            if (nextime > 0) {
			                minute = Math.floor(nextime / 60);
			                second = Math.floor(nextime - minute * 60);
			            }
			
			            if (minute <= 9) {
			                minute = '0' + minute;
			            }
			            if (second <= 9) {
			                second = '0' + second;
			            }
			
			            if (Math.floor(nextime) == 0) {
			                result = 00 + ":" + 00;
			                clearInterval(intervalId);
			            }
			
			            result = minute + ":" + second;
						document.getElementsByClassName("stime")[0].innerText= result;
			            
			       }
			
					var intervalId = setInterval(function(){
						 strTime();
					},1000);
	
					
					
					  //开始任务
				    document.getElementsByClassName("begin")[0].addEventListener("click",function(){
							 window.location.href= url;
							
					},false)
				    
				    //提交任务
				 function tijiao(){
				 		document.getElementsByClassName("btn1")[0].addEventListener("click",function(){
				   //判断是否输入手机号，姓名
				   console.log(oList);
				   console.log(oList.length);
				   var ming = document.getElementsByClassName("shu1")[0].value;
				    	var number = document.getElementsByClassName("shu2")[0].value;
				    	var imgPath;
				    	
				    	if(oList.length == 1){
				    		imgPath = oList[0]
				    	}else{
				    		var patt="";
				    		for(var a = 0;a < oList.length-1;a++){
				    			patt+=oList[a]+","
				    		}
				    		imgPath=patt+oList[oList.length-1]
				    	}
				    	
				    	console.log(ming+":"+number+":"+taskId+"]]]"+imgPath);
				    	
				    
				    
				    //上传任务
				    $.ajax({
								  type: 'POST',
								  url: host+"/buss/task/log/save?userId=12345678910",
								  data: {
								  	taskId:id,
								  	name:ming,
								  	phone:number,
								  	imgUpload:imgPath
								  	
								  },
								  success: function(res){
								  	console.log(res.msg);
								  	
								  	if(res.success){
								  		window.location.href ="./list.html"
								  	}
								  	
								  	if(!res.success){
								  		alert(res.msg);
								  	}
								  },
								  error:function(){
								  	console.log("error")
								  }
								  
								  
							 });
				    },false)
					
					}
				 
				   
				    //上传图片
				 
			var inputBox = document.getElementById("file");
			var img = document.getElementById("img");
			
			inputBox.addEventListener("change",function(){
					
			    upload(inputBox.files[0]);
			    		var omg = document.createElement("img");
						
						
						document.getElementById("tuList").appendChild(omg);
			     var file = this.files[0];
				    if(!!file){
				        //读取本地文件，图片文件转换为base64
				        var reader = new FileReader();
				       reader.readAsDataURL(file);
				        reader.onload = function(){
				            //读取完毕后输出结果
				            console.log(this.result);
				            omg.setAttribute("src",this.result);
				        }
				    }
		   		
			})
					
			
			function upload(file){
				var formdata = new FormData();
				// 上传到服务器的字段名称
				formdata.append("file",file);
				$.ajax({
				  url:host+"/upload/Img",
				  type: 'POST',
				  cache: false,
				  data: formdata,
				  timeout: 5000,
				  //必须false才会避开jQuery对 formdata 的默认处理 
				  // XMLHttpRequest会对 formdata 进行正确的处理
				  processData: false,
				  //必须false才会自动加上正确的Content-Type 
				  contentType: false,
				  xhrFields: {
				    withCredentials: true
				  },
				  success: function(data) {
						console.log(JSON.stringify(data))
						
						if(data.success){
							oList.push(data.data);
							
				    	if($(".shu1").eq(0).val().length == 0){
							alert("请输入姓名");
							return;
						}
				    	
				    	if($(".shu2").eq(0).val().length == 0){
							alert("请输入手机号");
							return;
						}
				    	
				    	$(".btn1").eq(0).css({background: "#4A90E2"})
							tijiao();
						}else{
							alert("请稍等，正在上传图片");
						}
						
						
				  },
				  error: function(XMLHttpRequest, textStatus, errorThrown) {
				
				  }
			})	
		}
				 
				 }
				   
				})
					
			
			
			//点击返回时
			
			$(".back").eq(0).click(function(){
				$(".tan").eq(0).css({display:"block"});
			})
			
			//点击返回列表
			
			$(".dLi").eq(0).click(function(){
				window.location.href="./list.html"
			})
			
			//点击放弃任务
			
			$(".dLi2").eq(0).click(function(){
				console.log("fangqirenwu"+id)
				$.ajax({
					url:host+"/buss/task/log/del?userId=12345678910&taskId="+id,
					type:"post",
					 
					 success:function(res){
					 	console.log(JSON.stringify(res))
					 	$(".tan").eq(0).css({display:"none"});
					 	if(res.success){
					 		alert(res.msg);
					 		setTimeout(function(){
					 			window.location.href="./list.html";
					 		},500)
					 		
					 	}
					 	
					 	
					 	
			
					 	
					 },
					 error:function(){
					 	console.log("放弃任务ajax失败")
					 }
				})
			})
			
			
			//点击取消
			
			$(".dclose").eq(0).click(function(){
				$(".tan").eq(0).css({display:"none"});
			})
		
				
				
		//点击图片放大
		
		$(".img").click(function(){
			$(this).toggleClass('min')
			$(this).toggleClass('max')
			
		})
				
		
		</script>
	</body>

</html>